<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <link
      rel="stylesheet"
      href="https://unpkg.com/papercss@1.8.2/dist/paper.min.css"
    />
    <!-- <link rel="stylesheet" href="./css/paper.css"> -->
    <style>
        .dark {
        --primary: #fff;
        --secondary: #0071de;
        --success: #189418;
        --warning: #ddcd45;
        --danger: #ff8c86;
        --muted: #868e96;
        --primary-light: white;
        --secondary-light: #007ef8;
        --success-light: #1caa1c;
        --warning-light: #e1d35b;
        --danger-light: #ffa4a0;
        --muted-light: #949ba2;
        --primary-dark: gray;
        --secondary-dark: black;
        --success-dark: #031003;
        --warning-dark: #746a15;
        --danger-dark: #a00800;
        --muted-dark: #313538;
        --primary-light-10: white;
        --secondary-light-10: #128bff;
        --success-light-10: #1fc01f;
        --warning-light-10: #e5d970;
        --danger-light-10: #ffbcb9;
        --muted-light-10: #a1a8ae;
        --primary-dark-10: #e6e6e6;
        --secondary-dark-10: #0057ab;
        --success-dark-10: #116811;
        --warning-dark-10: #cab925;
        --danger-dark-10: #ff5c53;
        --muted-dark-10: #6c757d;
        --primary-shaded-50: #343332;
        --primary-shaded-70: #2f2e2d;
        --white-dark: rgba(255, 255, 255, 0.03);
        --white-dark-light-80: rgba(255, 255, 255, 0.03);
        --light-dark: rgba(255, 255, 255, 0.7);
        --white: white;
        --main-background: #41403e;
        --main-background-light: #c1c0bd;
        --black: black;
        --primary-text: #41403e;
        --secondary-text: #0057ab;
        --success-text: #116811;
        --warning-text: #cab925;
        --danger-text: #ff5c53;
        --muted-text: #6c757d;
        --shadow-color-regular: rgba(0, 0, 0, 0.2);
        --shadow-color-hover: rgba(0, 0, 0, 0.3);
        --primary-inverse: #41403e;
      }
    </style>
    <title>Document</title>
  </head>
  <body>
    <nav class="borderb dark">
      <div class="nav-brand">
        <h4><a href="#">LOL Seach</a></h4>
      </div>
      <div class="collapsible">
        <input id="collapsible2" type="checkbox" name="collapsible2" />
        <label for="collapsible2">
          <div class="bar1"></div>
          <div class="bar2"></div>
          <div class="bar3"></div>
        </label>
        <div class="collapsible-body">
          <ul class="inline">
            <li><a href="#">Documentation</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Github</a></li>
          </ul>
        </div>
      </div>
    </nav>

    <br />

    <div class="paper container">
      <h1>Some Fresh Title</h1>
      <p>This is where some content would go.</p>
    </div>

    <div class="paper container">
      <button>xxxxxxxxx</button>
    </div>

    <div class="paper">
      <table>
        <thead>
          <tr class="row">
            <th class="col-3 col">名字</th>
            <th class="col-9 col">C城市</th>
          </tr>
        </thead>
        <tbody>
          <tr class="row">
            <td class="col-3 col">Francisco</td>
            <td class="col-9 col">Valencia, Spain</td>
          </tr>
        </tbody>
      </table>
    </div>
  </body>
</html>
